<template>
  <div class="steps el-steps el-steps--horizontal">
    <div
      v-for="(item, index) in stepList"
      :key="index"
      class="el-step is-horizontal"
      :class="{ isFlex: item.index == stepList.length }"
      style="flex-basis: 50%; margin-right: 0"
      :style="{
        flexBasis: (item.index == stepList.length ? 0 : 50) + '%',
        maxWidth: (item.index == stepList.length ? (1 / stepList.length) * 100 : 100) + '%'
      }"
    >
      <div class="el-step__head is-process">
        <div class="el-step__line">
          <i
            class="el-step__line-inner"
            style="transition-delay: 0ms; border-width: 0; width: 0%"
          />
        </div>
      </div>
      <div class="textCla">
        <div
          class="el-step__icon is-text"
          :class="{
            success: index < active,
            before: index > active,
            active: index == active
          }"
          @click="clickStep(index, stepFunction)"
        >
          <div class="el-step__icon-inner">
            <span v-if="index >= active">{{ item.index }}</span><i v-if="index < active" class="el-icon-check" />
          </div>
        </div>
        <div
          style="
            background: #fff;
            z-index: 1;
            line-height: 36px;
            padding: 0 5px;
          "
          :class="{ successText: index < active }"
        >
          {{ item.name }}
        </div>
      </div>
      <p class="pTitle">{{ item.title }}</p>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    active: { type: Number, default: 1 },
    stepFunction: { type: Function, default: () => {} },
    stepList: { type: Array, default: () => [] }
  },
  methods: {
    // 点击步骤条后回调
    clickStep(index, callback) {
      if (callback) callback(index)
    }
  }
}
</script>
<style lang='less' scoped>
.textCla {
  display: flex;
  align-items: center;
}
.steps {
  [class^='el-icon-'] {
    margin-left: 0;
    font-weight: 700;
    color: #4361ec;
  }
}
.el-step__icon.is-text {
  height: 36px;
  width: 36px;
}
.el-step:last-of-type.isFlex {
  flex-basis: auto !important;
  flex-shrink: 0;
  flex-grow: 0;
}
.el-step.is-horizontal .el-step__line {
  top: 18px;
}
.success {
  background-color: #dae0fb !important;
  color: #fff;
}
.successText {
  color: #333333;
}
.active {
  background-color: #305ED5 !important;
  color: #fff;
}
.before {
  background-color: #EAEEFA;
  border-color: #f3f3f5 !important;
  span {
    color: #9b9b9b;
  }
}
.pTitle {
  z-index: 1;
  width: 84px;
  margin-left: 36px;
  margin-top: 0;
  white-space: pre-wrap;
  color: #9b9b9b;
  font-size: 12px;
}
</style>
